<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script src="js/jquery.js"></script>
</head>

<body onload="selectProvince()">
<center>
    <h1>省市区三级联动</h1>
    <br>
    <select name="" id="province">
        <option value="">--请选择省份--</option>
    </select>

    <select name="" id="city">
        <option value="">--请选择城市--</option>
    </select>

    <select name="" id="area">
        <option value="">--请选择区/县--</option>
    </select>

</center>
</body>

<script>
    //查找省 页面进来时 就应该展示
    //在body标签上添加onload
    function selectProvince() {
        $(function () {
            $.getJSON("${pageContext.request.contextPath}/findProvince", {}, function (jsonObj) {
                for (var i = 0; i < jsonObj.length; i++) {
                    $('#province').append("<option value='" + jsonObj[i].provinceid + "'>" + jsonObj[i].province + "</option>");
                }
            })
        });
    };

    //查找市 通过省id 省变化 市变化
    $("#province").change(function () {
        //删除选择错误的省对应的市--同时应该删除区
         $("#city option:gt(0)").remove();
         $("#area option:gt(0)").remove();
        //发送ajax
        $(function () {
            $.getJSON("${pageContext.request.contextPath}/findCity", {
                provinceid: $("#province").val()
            }, function (jsonObj) {
                for (var i = 0; i < jsonObj.length; i++) {
                    $('#city').append("<option value='" + jsonObj[i].cityid + "'>" + jsonObj[i].city + "</option>");
                }
            })
        });
    });

    //查找区 通过市id 市变化 区变化
    $("#city").change(function () {
        //删除选择错误的市对应的区
        $("#area option:gt(0)").remove();
        //发送ajax
        $(function () {
            $.getJSON("${pageContext.request.contextPath}/findArea", {
                cityid: $("#city").val()
            }, function (jsonObj) {
                console.log(jsonObj)
                for (var i = 0; i < jsonObj.length; i++) {
                    $('#area').append("<option value='" + jsonObj[i].areaid + "'>" + jsonObj[i].area + "</option>");
                }
            })
        });
    });

</script>

</html>
